<template>
	<div class="bigHezi">
		<div ref="box" class="box">
			<div class="kuang">
				<img :src='require("@/assets/img/kuang.png")' alt />
				<img class="ewm" :src='require("@/assets/img/ewm.png")' alt />
			</div>
		</div>

		<div>
			<a-button type="info" @click="download">{{imgUrl?"下载":"正在合并中，请稍等"}}</a-button>
		</div>
		<div>
			<img class="base" :src="imgUrl" alt />

		</div>

	</div>
</template>
<script>
	import 'ant-design-vue/lib/button/style/index.css';
		import {Button} from 'ant-design-vue'
	// import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				imgUrl: ''
			}
		},
		components:{
			aButton:Button
		},
		methods: {
			// 合成
			draw() {
				window.pageYOffset = 0;
				document.documentElement.scrollTop = 0
				document.body.scrollTop = 0
				var that = this;
				html2canvas(that.$refs.box).then(function(canvas) {
					that.imgUrl = canvas.toDataURL() //将canvas转为base64图片(eg. )
				});
			},
			download() {
				let imgData = this.imgUrl
				this.downloadFile('测试.png', imgData);
			},
			//下载
			downloadFile(fileName, content) {
				let aLink = document.createElement('a');
				let blob = this.base64ToBlob(content); //new Blob([content]);

				let evt = document.createEvent("HTMLEvents");
				evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
				aLink.download = fileName;
				aLink.href = URL.createObjectURL(blob);

				// aLink.dispatchEvent(evt);
				aLink.click()
			},
			//base64转blob
			base64ToBlob(code) {
				let parts = code.split(';base64,');
				let contentType = parts[0].split(':')[1];
				let raw = window.atob(parts[1]);
				let rawLength = raw.length;

				let uInt8Array = new Uint8Array(rawLength);

				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i);
				}
				return new Blob([uInt8Array], {
					type: contentType
				});
			}
		},
		mounted() {

			setTimeout(() => {
				this.draw()
			}, 1000)
		}
	};
</script>
<style lang="less" scoped>
	.bigHezi {
		.flex_row(row);
		align-items: center;
		flex-wrap: wrap;

		.kuang {
			position: relative;
		}

		.ewm {
			width: 84px;
			position: absolute;
			top: 251px;
			left: 116px;

		}
	}
</style>
